// 当前页面借助的技术
// (1) vue3中的插件使用:https://cn.vuejs.org/guide/reusability/plugins.html
      // 作用:通过 app.component() 和 app.directive() 注册一到多个全局组件或自定义指令。
// (2)vueuse中的方法:https://v4-11-2.vueuse.org/core/useintersectionobserver/#useintersectionobserver
      // 作用:当元素在视口外时的一个判断


      
// 导入vueuse中的方法（此方法主要用于当元素在视口外时的一个判断）
import { useIntersectionObserver } from "@vueuse/core";
export default {
  install: (app) => {
    // 懒加载指令
    app.directive("img-lazy", {
      mounted(el, bingding) {
        // el:指令绑定的那个元素img
        // bingding:bingding.value 指令等于号后边绑定的表达式的值是图片的url
    //    从 useIntersectionObserver 里面解构出一个stop，用于停止监听
      const {stop} =   useIntersectionObserver(el, ([{ isIntersecting }]) => {
          // 使用vueuse中的useIntersectionObserver方法  地址：<https://vueuse.org/core/useIntersectionObserver/#useintersectionobserver>
          // 方法中的el为监听的元素，isIntersecting值是布尔值，如果为true说明进入视口区域
          if (isIntersecting) {
            // 如果进入视口区域给元素的src赋值，bingding.value表示图片的url地址
            el.src = bingding.value;
            // 当第一次赋值完后停止监听
            stop()
          }
          
        });
      },
    });
  },
};
